<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #biao1{
            width: 600px;
            margin:auto;
            border-collapse: collapse;
            text-align: center;
        }
        #biao1 thead tr{
            height: 50px;
            background-color: pink;
        }
        #biao1 tbody tr{
            height: 30px;
        }
        #biao1 td,
        th{
            border: 1px solid #333;
        }
        .biao2{
            width: 300px;
            height: 200px;
            margin-left: 40%;
            margin-top: 30px;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <table cellspacing="0" id="biao1">
        <thead>
            <tr>
                <th>姓名</th> 
                <th>性别</th>
                <th>属性</th>
                <th>等级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>苹果</th>
                <th>11</th>
                <th>22</th>
                <th>33</th>
                <th>
                    <a href="javascript:;">删除</a>
                </th>
            </tr>
            <tr>
                <th>香蕉</th>
                <th>11</th>
                <th>22</th>
                <th>33</th>
                <th>
                    <a href="javascript:;">删除</a>
                </th>
            </tr>
            <tr>
                <th>橘子</th>
                <th>11</th>
                <th>22</th>
                <th>33</th>
                <th>
                    <a href="javascript:;">删除</a>
                </th>
            </tr>
        </tbody>


    <table class="biao2" >
        <tr>
            <td class="word">姓名:</td>
            <td class="inp">
                <input type="text" id="name">
            </td>
        </tr>
        <tr>
            <td class="word">性别:</td>
            <td class="inp">
                <input type="text" name="sec" id="sec">
            </td>
        </tr>
        <tr>
            <td class="word">属性:</td>
            <td class="inp">
                <input type="text" name="sx" id="sx">
            </td>
        </tr>
        <tr>
            <td class="word">等级:</td>
            <td class="inp">
                <input type="text" name="lv" id="lv">
            </td>
        </tr>
        <tr>
            <td>
                <button id="add">添加</button>
            </td>
        </tr>
    </table>
    <script>
           //删除操作
        var as = document.getElementsByTagName("a");
        for(var i = 0;i < as.length;i++){
            as[i].onclick = function(){
            var tr = this.parentNode.parentNode;
            var name = tr.getElementsByTagName("th")[0].innerHTML;
            var flag = confirm("确定删除" + name + "吗？");
            if(flag){
              tr.parentNode.removeChild(tr);  
            }
            
            }
        }
          //添加操作
        var add = document.getElementById("add");
        add.onclick = function(){
        var name = document.getElementById("name").value;
        var sec = document.getElementById("sec").value;
        var sx = document.getElementById("sx").value;
        var lv = document.getElementById("lv").value;

        // alert(name + "," + sec + "," + sx + "," + lv);

        var trs = document.createElement("tr");

    trs.innerHTML = "<td>"+name+"</td>"+
                   "<td>"+sec+"</td>"+
                   "<td>"+sx+"</td>"+
                   "<td>"+lv+"</td>"+
                   "<td><a href='javascript:;'>删除</a></td>"
        
        var a = trs.getElementsByTagName("a")[0];
        a.onclick = function(){
            var tr = this.parentNode.parentNode;
            var name = tr.getElementsByTagName("td")[0].innerHTML;
            var flag = confirm("确定删除" + name + "吗？");
            if(flag){
              tr.parentNode.removeChild(tr);  
            }
        }

        var biao1 = document.getElementById("biao1");
        var tbody = biao1.getElementsByTagName("tbody")[0];
        tbody.appendChild(trs);
        }
    </script>
</body>
</html>